import { defineComponent } from "vue";
import PageTitle from "@/components/PageTitle";
import CardView from "@/components/CardView";
import TitleView from "@/components/TitleView";
import Text from "@/components/Text";
import PopTitle from "@/components/PopTitle";
import ButtonView from "@/components/ButtonView";
import PopupCheck from "@/components/PopupCheck";
import { getSize, isDh } from "@/command/apiTool";
import { useRequest } from "./request";
import { useRoute, useRouter } from "vue-router";

export default defineComponent({
  name: "",
  setup() {
    const router = useRouter();
    const route = useRoute();
    const { getDetail } = useRequest();
    console.log("getDetailgetDetailgetDetail", getDetail);

    const render1 = () => {
      return <img src={getDetail.value.img} class="w-full h-[206px]" />;
      // <Banner />;
    };
    const render2 = () => {
      const getDetailInfo = getDetail.value;
      return (
        <CardView>
          <TitleView
            title={getDetailInfo.name}
            right={() => (
              <span class="text-[12px] text-[#999]">
                {getDetailInfo.scale}农户选择
              </span>
            )}
          />
          <Text class="mt-[10px]">{getDetailInfo.comment}</Text>
        </CardView>
      );
    };
    const render3 = () => {
      const list = getDetail.value;
      return (
        <CardView class="mt-[20px]">
          {list.list.map((item: any) => {
            return (
              <Text>
                {item.title}:{item.meno}
              </Text>
            );
          })}
        </CardView>
      );
    };
    const render4 = () => {
      const getDetailInfo = getDetail.value.userList;
      const data1 = getDetailInfo.map((e: any) => {
        return {
          userName: e.userName,
          logo: e.logo,
          right: () => {
            return (
              <ButtonView
                onClick={() =>
                  router.push(
                    `/seedPurchase?id=${e.userId}&pid=${route.query.id}`
                  )
                }
                class="!h-[22px]"
                style={{
                  height: getSize(22) + "!important",
                  width: getSize(61) + "!important",
                }}
              >
                申请代购
              </ButtonView>
            );
          },
        };
      });
      return (
        <div class="bg-white">
          <PopTitle title="种植大户" type="left" />
          <PopupCheck data={data1} />
        </div>
      );
    };
    return () => {
      return (
        <PageTitle title="品种详情" childClass="!p-[0px] m-child-top-20 ">
          {render1()}
          {render2()}
          {render3()}
          {!isDh() && render4()}
        </PageTitle>
      );
    };
  },
});
